/* 
    切换动画，一种最普遍的思路：把图片们用ul之类的包起来，并设置float。
    然后设置这个ul本身为absolute定位，其父标签用relative定位。通过设置ul的left或top值，实现图片队列的滚动效果。
 */
define(function(require, exports, module) {
	var $ = require('bigfoot/common'); 
	var Fx = require('bigfoot/dhtml/fx');

	module.exports = {
		init : function(){
			var el = this.el, // Container Element
			    containerWidth = el.clientWidth, // 容器宽度
				mover = el.querySelector('ul'), 
				items = mover.children;

			this.len = items.length;
			this.containerWidth = containerWidth;
			this.mover = mover;

            render.call(this, items);

            // 左右按钮
            if (el.querySelector('.nextItemAction')){
            	el.querySelector('.nextItemAction').onclick = this.goNext.bind(this);
            }
            if (el.querySelector('.pervItemAction')){
            	el.querySelector('.pervItemAction').onclick = this.goPrevious.bind(this);
            }
            
//            el.$('.nextItemAction', {isAssert : true})(this.goNext.bind(this));
//            el.$('.pervItemAction', {isAssert : true})(this.goPrevious.bind(this));
            
            // 绑定键盘 事件
            var wheelDelta = 0;
            // 要让 parent 获取焦点，不然没法响应 键盘事件
            if(parent.document != document){
                // alert('if')
                var dummy = document.createElement('input');
                dummy.type = 'text';
                dummy.style.height = '0';
                parent.document.body.appendChild(dummy);
                dummy.focus();
                dummy.parentNode.removeChild(dummy);
            }
            
            parent.document.onkeydown = onNarrowKeyPress.bind(this);
            parent.document.onmousewheel = function(e){
                if(e.wheelDelta == -120){
                    if((++wheelDelta) > 4){
                        // console.log('next'); // 加大 wheelDelta 值 就不会跳帧
                        this.goNext();
                        wheelDelta = 0;
                    }
                }
                if(e.wheelDelta == 120){
                    if((++wheelDelta) > 4){
                        this.goPrevious();
                        wheelDelta = 0;
                    }
                }
            }.bind(this);

            // window.onresize = resize.bind(this);
            this.go(0); // why?

           if(this.isOnClk_then_slow_Next)
        	   mover.onclick = this.goNext.bind(this);// next
            
            el.regChildClick('.closeAction', this.close.bind(this));
 
        },
        
        isOnClk_then_slow_Next : true,

        // 关闭
        close : function(e){
            parent.document.onkeydown = parent.document.onmousewheel = null;
            // 渐隐消失
            Fx.fadeOut(this.el);
            window.setTimeout(function(){
                this.el.parentNode.removeChild(this.el);

                this.onClose && this.onClose();
            }.bind(this), 500);

        },

        // 跳到指定的那一帧 @param {Number} i
        go : function(i, isDirectShow){
            this.currentIndex = i; // @type {Number} 当前索引
            
            var el = this.el;
            if(isDirectShow)el.style.display = 'none';
            
            if(isNaN(i))throw '异常';
            Fx.slideX(this.mover, - this.containerWidth * i);

            isDirectShow && setTimeout(function(){
                 Fx.fadeIn(el);
                // style.display = 'block';
            }, 500);

            // All AFTER Events
            this.onItemSwitch && this.onItemSwitch.call(this, i);// @event 切换事件.@param {Number} i 当前项之索引

            this.isBOF = this.currentIndex == 0;             // 设置一个标记，该标记用作表示是否到了最始端。@param {Boolean} isEOF
            this.isBOF && this.firstFrame  && this.firstFrame(this.currentIndex);
            this.isEOF = (this.currentIndex + 1)  == this.len; // 设置一个标记，该标记用作表示是否到了最始端。@param {Boolean} isBOF
            this.isEOF && this.onLastFrame && this.onLastFrame(this.currentIndex);
        },

        // 跳到前一帧。
        goPrevious : function(){
            this.currentIndex--;
            if (this.currentIndex < 0)this.currentIndex = this.len - 1;
            this.go(this.currentIndex); 
        },
        currentIndex : 0,

        /**
         * 跳到下一帧。
         */
        goNext : function(){
            this.currentIndex++;
            if (this.currentIndex == this.len)this.currentIndex = 0; // 循环
            
            this.go(this.currentIndex);
        }

        ,isBOF : true, isEOF : false       // 一开始的时候， this.isBof = true
    };

    function render(items){
        // 设置 mover 和 item 宽度。初始化时候运行。
        for (var i = 0; i < this.len; i++) {
            items[i].style.width = this.containerWidth + 'px'; // 设置item 宽度
        }
        this.mover.style.width = this.containerWidth * this.len  + 'px'; // 总宽度，也是容器中最宽的宽度。赋予给 mover。
    }

    function onNarrowKeyPress(e){
        e = e || event;
        var keycode = e.which || e.keyCode;
        switch(keycode){  
            case 1:   
            case 38:   
            case 269: //up   
                break;   
            case 40:   
            case 2:   
            case 270: //down    
                break;   
            case 37:   
            case 3:   
            case 271: //left   
                this.goPrevious();
                break;   
            case 39:   
            case 4:   
            case 272: //right   
                this.goNext();
                break;   
            case 13: //enter   
  
                break;   
            case 339: //exit   
            case 340: //back    
                break;  
            case 27:
            	this.close();
            	break; 
        }  
    }

   /**
    *  登记 resize 事件，以便 resize 容器的时候调整大小。
    */
    function resize() {
        console.log('调整大小中……');
        this.containerWidth = this.el.clientWidth;
        render.call(this, this.mover.children);
    }    
	var lightboxTpl =  
		'<div class="wl_Gallery">\
		    <div class="closeAction"></div>\
		    <div class="nextItemAction"></div>\
		    <div class="pervItemAction"></div>\
		    <ul></ul>\
		</div>';
	
    module.exports.showLightBox = function (e){
    	var el = e.target;
    	if(el.tagName == 'IMG'){
    		if(el.className.indexOf('fd') != -1)return; // 放大镜图片，不响应事件
    		
    		var frag = document.createElement('div');
    		frag.innerHTML = document.querySelector('.lightboxTpl') ? 
    				document.querySelector('.lightboxTpl').value : lightboxTpl;
    		var ul = frag.$('ul');
    		// collect imgs
    		var imgList = el.up('ul');
    		
    		if(imgList){
    			
    			imgList.$('img', function(img){ // Copy imgs list
    				var li = document.createElement('li');
    				li.appendChild(img.cloneNode());
    				ul.appendChild(li);
    			});
    			
    			var index, li = el.up('li');
    			// debugger;
    			[].forEach.call(imgList.getChildren(), function(child, i){
    				if(child == li){
    					index = i;
    					return false;
    				}
    			});
    		}else{
    			ul.innerHTML = '<li><img src="' + el.src +'" /></li>';
    			index = 0;
    		}
 
			var carouselEl = frag.$('div');
    		parent.document.body.appendChild(carouselEl);

		    var obj = Object.create(module.exports);
		    obj.el = carouselEl;
		    obj.init();
		    obj.go(index, true);
    		// carousel
    	}
    }
});